<template>
	<view class="order-detail">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="back-btn" @click="backPage()">
				<view class="back-icon"></view>
			</view>
			<view class="title">订单详情</view>
			<view class="right-icons">
				<text class="iconfont">&#xe601;</text>
			</view>
		</view>

		<!-- 订单内容区域 -->
		<view class="order-content">
			<!-- 核销码信息 -->
			<view class="verification-code">
				<view class="code">核销码 {{currentOrder.verificationCode}}</view>
				<view class="car-info">车辆:{{currentOrder.carId}}</view>
			</view>

			<!-- 服务内容 -->
			<view class="service-content">
				<view class="section-title">服务内容</view>
				<view class="service-item">
					<text>{{currentService.name}}</text>

				</view>
			</view>

			<!-- 订单信息 -->
			<view class="order-info">
				<view class="section-title">订单信息</view>
				<view class="info-item">
					<text>原价</text>
					<text>¥{{currentService.originalPrice}}</text>
				</view>
				<view class="info-item">
					<text>优惠</text>
					<text>¥{{currentService.presentPrice}}</text>
				</view>
				<view class="info-item">
					<text>实付金额</text>
					<text>¥{{currentOrder.price}}</text>
				</view>
				<view class="info-item">
					<text>订单编号</text>
					<text>{{currentOrder.id}}</text>
				</view>
				<view class="info-item">
					<text>预约时间</text>
					<text>{{currentOrder.reservationTime}}</text>
				</view>
				<view class="info-item">
					<text>支付时间</text>
					<text>{{currentOrder.payTime}}</text>
				</view>
				<view class="info-item">
					<text>核销时间</text>
					<text>{{currentOrder.useTime}}</text>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-button" v-if="currentOrder.status == 1" @click="handleUpdate(currentOrder.id)">确认核销</view>
		<view class="bottom-button" v-else>已核销</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import request from '/utils/request.js';
	import {
		useRoute
	} from 'vue-router'; // 注意：uniApp 中可能需要使用 uni 的路由钩子
	const backPage = () => {
		uni.navigateTo({
			url:'/pages/index/dingdanguanli/dingdanguanli'
		})
	}
	// 获取路由参数
	const route = useRoute();
	const orderId = ref(route.query.id);

	const currentOrder = ref({})
	const currentService = ref({})
	const sid = ref()
	const osid = ref()
	const form = reactive({})

	function reset() {
		form.value = {
			id: null,
			verificationCode: null,
			verificationImg: null,
			mid: null,
			uid: null,
			serviceId: null,
			serviceTypeId: null,
			orderTime: null,
			reservationTime: null,
			carId: null,
			platformCouponId: null,
			shopCouponId: null,
			price: null,
			payTime: null,
			payType: null,
			useTime: null,
			status: null,
			deleted: null
		}
	}
	const oid = ref()
	const currentDate = ref('');
	const updateDate = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = String(now.getMonth() + 1).padStart(2, '0');
		const day = String(now.getDate()).padStart(2, '0');
		currentDate.value = `${year}` - `${month}-${day}`;
	};
	// 处理更新函数
	const handleUpdate = async (oid) => {
		try {
			reset() // 重置表单
			const id = oid
			request({
				url: `/yyq/orders/${id}`, // 接口路径为 `/orders/{id}`
				method: 'GET',
				success(res) {
					// 处理返回数据
					console.log('form详情：', res.data.data);
					form.value = res.data.data;
				}
			});
			// 第二步：显示确认对话框
			const {
				confirm
			} = await uni.showModal({
				title: '确认核销',
				content: '是否确认核销此订单？',
				confirmText: '确认',
				cancelText: '取消'
			})

			if (!confirm) return // 用户取消操作
			
			request({
				url: 'yyq/orders/complete',
				method: 'PUT',
				data: form.value,
				success(res) {
					console.log('核销后', res.data);
					console.log(osid.value)
					uni.navigateTo({
						url: '/pages/index/dingdanguanli/dingdanxiangqing/dingdanxiangqing?id='+osid.value
					})
					
				}
			})


		} catch (error) {
			console.error('处理失败', error)

			// 显示错误提示
			uni.showToast({
				title: '操作失败，请重试',
				icon: 'none'
			})
		}
	}



	onMounted(() => {
		if (orderId.value) {
			getOrderDetail(orderId.value);
		}
		updateDate();
	})
	
	// 获取订单详情的函数
	function getOrderDetail(orderId) {
		request({
			url: `/yyq/orders/${orderId}`, // 接口路径为 `/orders/{id}`
			method: 'GET',
			success(res) {
				// 处理返回数据
				console.log('订单详情：', res.data.data);
				currentOrder.value = res.data.data;
				sid.value = currentOrder.value.serviceId
				osid.value = currentOrder.value.id;
				// 订单详情加载完成后，获取服务详情
				if (sid.value) {
					getServiceDetail(sid.value);
				}
			}
		});
	}
	// 获取服务详情的函数
	function getServiceDetail(sid) {
		request({
			url: `/yyq/fuwudetails/${sid}`, // 假设接口路径为 `/service/{id}`
			method: 'GET',
			success(res) {
				console.log('服务详情：', res.data.data);
				currentService.value = res.data.data; // 将服务详情存入响应式数据
			}
		});
	}
</script>

<style lang="scss">
	.order-detail {
		min-height: 100vh;
		background-color: #f5f5f5;

		.nav-bar {
			background-color: #007AFF;
			color: #fff;
			padding: 44px 16px 10px;
			display: flex;
			align-items: center;

			.back-icon {
				width: 24px;
			}

			.title {
				flex: 1;
				text-align: center;
				font-size: 18px;
			}

			.right-icons {
				width: 24px;
			}
		}

		.order-content {
			padding: 16px;

			.verification-code {
				background-color: #fff;
				padding: 16px;
				border-radius: 8px;
				margin-bottom: 16px;

				.code {
					font-size: 18px;
					font-weight: bold;
					margin-bottom: 8px;
				}

				.car-info {
					color: #666;
				}
			}

			.section-title {
				font-size: 16px;
				margin-bottom: 12px;
			}

			.service-content,
			.order-info {
				background-color: #fff;
				padding: 16px;
				border-radius: 8px;
				margin-bottom: 16px;
			}

			.service-item,
			.info-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 12px;
				color: #333;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		.bottom-button {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 50px;
			background-color: #007AFF;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;

			&.disabled {
				background-color: #999;
			}
		}
	}

	.back-btn {
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
		position: fixed;
		top: -25px;
		left: -20px;
	}

	.back-icon {
		width: 30px;
		height: 30px;
		position: fixed;
		left: 30px;
		top: 30px;
	}

	.back-icon::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 2px;
		background-color: #fff;
		top: 40rpx;
		left: 47rpx;
		transform: translate(-50%, -50%);
	}

	.back-icon::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		border-left: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		top: 30rpx;
		left: 30rpx;
	}
</style>